<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            display: grid;
            grid-template-rows: 100px 100px 1fr 100px 100px;
            grid-template-areas:
                "header"
                "siderbar"
                "content"
                "siderbar2"
                "footer";
        }

        @media screen and (min-width:500px) {
            body {
                display: grid;
                grid-template-columns: 200px 1fr;
                grid-template-rows: 100px 1fr 100px 100px;
                grid-template-areas:
                    "header header"
                    "siderbar content"
                    "siderbar2 siderbar2"
                    "footer footer";
            }

        }

        @media screen and (min-width:600px) {
            body {
                display: grid;
                grid-template-columns: 200px 1fr 200px;
                grid-template-rows: 100px 1fr 100px;
                grid-template-areas:
                    "header header header"
                    "siderbar content siderbar2"
                    "footer footer footer";
            }
        }

            header {
                grid-area: header;
                background-color: aliceblue;
            }

            .sidebar {
                grid-area: siderbar;
                background-color: antiquewhite;
            }

            .content {
                grid-area: content;
                background-color: aqua;
            }

            .sidebar2 {
                grid-area: siderbar2;
                background-color: aquamarine;
            }

            footer {
                grid-area: footer;
                background-color: blanchedalmond;
            }
    </style>
</head>

<body>
    <header>header</header>
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
    <div class="sidebar2">sidebar2</div>
    <footer>footer</footer>
</body>

</html>